<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>个人中心</title>
    <link type="image/x-icon" rel="shortcut icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../res/mui/css/mui.min.css" />
    <link rel="stylesheet" href="../res/fontAwesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/user.css" />
</head>

<body>
    <div class="cz_layout bgg">
        <header class="cz_topBar">
            <a href="javascript:history.back();" class="icon_back fa fa-arrow-left"></a>
            <span class="title">个人中心</span>
        </header>
        <div class="cz_container">
            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media">
                    <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" id="head-img" src="../images/user.jpg">
                    <div class="mui-media-body">
                        <span class="name"></span>
                        <p class="mui-ellipsis">账号:hellomui</p>
                    </div>
                </a>
                </li>
            </ul>
            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell">
                    <a href="password.html" class="mui-navigate-right">账号与安全</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="../cart.html" class="mui-navigate-right">我的购物车</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="address.html" class="mui-navigate-right">收货地址管理</a>
                </li>
            </ul>
            <div class="p20">
                <a href="javascript:;" class="mui-btn btn_outLogin">退出登录</a>
            </div>
        </div>
        <footer class="cz_tabs">
            <a class="tab_home fa fa-home" href="../index.html"><span>首页</span></a>
            <a class="tab_cate fa fa-bars" href="../cate.html"><span>分类</span></a>
            <a class="tab_cart fa fa-shopping-cart" href="../cart.html"><span>购物车</span></a>
            <a class="tab_user fa fa-user now" href="../user/index.html"><span>会员中心</span></a>
        </footer>
    </div>
    <script src="../res/mui/js/mui.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script>
        // 查询用户的信息
        // 1.直接发送请求
        // 2.等待服务端响应结果,判断用户是否登录
        // 3.没有登录,跳转到登录页面,登录显示用户信息
        $.ajax({
            // url: 'http://localhost:3000/user/queryUserMessage',
            url: '/api/user/queryUserMessage',
            type: 'get',
            // xhrFields: {
            //     //让浏览器发送跨域 cookie
            //     withCredentials: true
            // },
            success: function (info) {
                // 如果请求到数据，已登录
                // 如果没有请求到数据，跳转
                if (info.error) {
                    // / = http:/53.com
                    // / 是一种简写，指的是 当前协议 + 当前域名 + 端口号

                    location.href =  '/user/login.html?url=' + location.href;
                } else {
                    $('span.name').text(info.username);
                }
            }
        })

        //退出登录
        $('.btn_outLogin').on('click',function(){
            $.ajax({
                url:'/api/user/logout',
                type:'get',
                success:function(info){
                    if(info.success){
                        confirm('退出成功');
                        location.href='/user/login.html';
                    }
                }
            })
        })
    </script>
</body>

</html>